<template>
  <div class="conditions-screening-container">
    <div class="left-container-warp">
      <!-- 条件筛选区域 -->
      <div class="conditions-container">
        <slot name="conditions"></slot>
      </div>
      <!-- 右侧操作区域 -->
      <div class="operate-container">
        <slot name="operate"></slot>
      </div>
    </div>
    <!-- 统计、明细切换按钮 -->
    <div class="check-data-type-container" v-if="isDataType">
      <div
        class="type-button"
        :class="type == 'statistical' && 'on'"
        @click="_checkDataType('statistical')"
      >
        <a-icon type="bar-chart" />
        数据统计
      </div>
      <div class="space-line"></div>
      <div
        class="type-button"
        :class="type == 'report' && 'on'"
        @click="_checkDataType('report')"
      >
        <a-icon type="profile" />
        数据明细
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScreenConditions",
  props: {
    //是否显示数据类型按钮区域
    isDataType: {
      type: Boolean,
      default: true,
    },
    //数据类型切换按钮激活标识   statistical 统计  report 报表
    dataType: {
      type: String,
      default: "statistical",
    },
  },
  watch: {
    dataType: {
      handler(val) {
        this.type = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      type: "",
    };
  },
  methods: {
    _checkDataType(type = "statistical") {
      this.type = type;
      this.$emit("update:dataType", type);
      this.$emit("checkDataType", type);
    },
  },
};
</script>

<style lang="less" scoped>
.conditions-screening-container {
  padding: 10px 20px 0 20px;
  background: #fff;
  display: flex;
  position: relative;
  z-index: 11;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.14);
  .left-container-warp {
    flex: 1;
    .flex();
  }
  .conditions-container {
    display: flex;
    flex-wrap: wrap;
    /deep/.ant-input {
      width: 160px;
      margin-right: 16px;
      margin-bottom: 10px;
    }
    /deep/.ant-input-affix-wrapper {
      .ant-input-suffix {
        right: 22px;
        margin-top: -5px;
      }
    }

    /deep/.ant-calendar-picker {
      .ant-input {
        width: 336px;
        margin-bottom: 0;
      }
      &.month-picker {
        margin-right: 0;
        .ant-input {
          width: 160px;
          margin-bottom: 0;
        }
        .anticon {
          right: 24px;
        }
      }
      &.week-picker {
        margin-right: 0;
        .ant-input {
          width: 160px;
          margin-bottom: 0;
        }
        .anticon {
          right: 24px;
        }
      }
      &.year-picker {
        margin-right: 0;
        .ant-input {
          width: 160px;
          margin-bottom: 0;
        }
        .anticon {
          right: 24px;
        }
      }
      margin-right: 16px;
      margin-bottom: 10px;
    }
    /deep/.ant-select {
      margin-right: 16px;
      margin-bottom: 10px;
      .ant-select-selection {
        &.ant-select-selection--single {
          width: 160px;
        }
        &.ant-select-selection--multiple {
          min-width: 160px;
        }
      }
    }
  }
  .operate-container {
    display: flex;
    flex-shrink: 0;
    .ant-btn {
      &:last-child {
        margin-left: 16px;
      }
    }
  }
  .check-data-type-container {
    flex-shrink: 0;
    padding-left: 20px;
    .flex();
    height: 32px;
    align-items: center;
    .space-line {
      margin: 0 10px;
      width: 1px;
      height: 16px;
      background: #cbcbcd;
    }
    .type-button {
      color: #89898b;
      flex-shrink: 0;
      cursor: pointer;
      height: 100%;
      .flex();
      align-items: center;
      justify-content: flex-end;
      .anticon {
        margin-right: 8px;
        font-size: 17px;
      }
      &.on {
        color: var(--primary-color);
      }
    }
  }
}
</style>
